<template>
  <div class="water">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">预约服务</span>
      <span class="header-wrap-right" style="text-align:center;" @click="gowaterList">
        订单
      </span>
    </div>
   <!-- <van-tabs
      v-model="activeName"
      animated
      :swipeable='true'
      :border='false'
      title-inactive-color="#57c5c6"
      title-active-color="#FD5585"
      background='#fff'
      line-width = '50%'
      line-height = '0.02rem'
      @change=onChange(activeName)
    >
    <van-tab
      v-model="activeName"
      v-for="(list,index) in listData"
      :key="index"
      :title="list.name"
      :name="list.id"
      > -->
          <!-- 列表 -->
          <!-- <div v-if="list.id==0"> -->
            <!-- <maxSwiper :message='maxSwiper'/> -->
    <div class="allpay-box" style="margin-top:1.2rem;">
      <div @click="gowaterDetail(message.id)" class="allpay-list" v-for="(message,index) in servicelist" :key="index">
          <div class="img-box">
            <div class="img-content" style="background:#fff;">
              <img :src=message.image alt="">
              <!-- <i class="icon iconfont" v-html="message.icon"></i> -->
            </div>
          </div>
          <div class="pay-content">
            <span>{{message.name}}</span>
            <span>{{message.shop_name}}</span>
            <span>金额：&nbsp;¥&nbsp;{{message.price}}元</span>
            <span>库存：{{message.stock}}</span>
          </div>
      </div>
    </div>
    <!-- </div> -->
    <!--
    </van-tab>
    </van-tabs> -->
    <Tips v-if="show"/>
  </div>
</template>
<script>
import api from '../../api/api.js'
// import skuData from './js/data';
// import { Sku,NavBar,Button,Field, Popup, Picker,Tab, Tabs } from 'vant';
export default {
  data(){
    return{
      // activeName:0,
      // listData:[
      //   {
      //     id:'0',
      //     name: '服务列表',
      //   },
      //   {
      //     id:'1',
      //     name: '订单列表',
      //   }
      // ],
      show:false,
      length:'',
      servicelist:[]
    }
  },
  created(){
    this.listsku()
  },
  methods:{
    // onChange(id){
    //   if(id==1){

    //   }
    // },
    gowaterList(){
      this.$router.push('/waterList')
    },
    gowaterDetail(id){
      this.$router.push({
        path: '/waterDetail',
        query: {
          id
        }
      })
    },
    goback(){
      this.$router.go(-1)
    },
    // 获取服务列表
    listsku(){
      this.$get(api.listsku, {})
      .then((response) => {
        this.servicelist = response.data.data
        this.length = response.data.data.lenght
        if(this.length!=0){
          this.show = false
        }else{
          this.show = true
          this.$toast.loading({
            message:'暂无搜索内容',
            duration: 350
          })
        }
      })
      .catch((error) => {
        console.log(error)
      });
    },

  },
  components: {
    // [NavBar.name]:NavBar,
    // [Sku.name]:Sku,
    // [Button.name]:Button,
    // [Field.name]:Field,
    // [Picker.name]:Picker,
    // [Popup.name]:Popup,
    // [Tab.name]:Tab,
    // [Tabs.name]:Tabs,
  }
}
</script>
<style>
  /* .water .van-sku-row__title{
    display: none;
  }
  .water .van-button--block{
    display: none;
  }
  .water .van-tabs__wrap {
    z-index: 1000;
    width: 100%;
    border-bottom: 1px solid #423b6f;
    position: fixed;
    top: 1rem;
    left: 0;
  } */
</style>
<style scoped>
.allpay-list{
  display: flex;
  height: 2.5rem;
  background: #fff;
  margin: .25rem .3rem;
  border-radius: .2rem;
}
.img-box{
  flex: 1.5;
  margin-right: .2rem;
}
.img-content{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: .2rem 0 0 .2rem;
}
.img-content img{
  width: 100%;
  height: 100%;
  border-radius: .2rem 0 0 .2rem;
}
.pay-content{
  flex: 3;
  padding-top: .28rem;
}
.pay-content span{
  display: block;
  line-height: .5rem;
}
.pay-content span:nth-of-type(1){
  font-size: .32rem;
  color: #000;
  font-weight: bold;
}
.pay-content span:nth-of-type(2){
  color: #FD5585;
  font-weight: bold;
}
</style>
